<template>
	<view :class="pageClass" :style="pageStyle" v-if="pageReady" style="background-color: #F5F5F5;">
		<moxi-nav :set="navSet"></moxi-nav>
		<view class="file_manage" :style="{ '--text-color': colorList[0], '--bg-color': colorList[15], }">
			<!-- 顶部面包屑导航栏 -->
			<view class="topNav">
				<view class="controll">
					<view class="btn" v-if="currentNavIndex != 0" @click="changeNavIndex(currentNavIndex - 1)"
						:style="{ '--text-color': currentNavIndex == 0 ? '#d5d5d5' : '#999999', '--bg-color': currentNavIndex == 0 ? '#d5d5d515' : '#99999915', }">
						<u-icon name="arrow-left" :color="currentNavIndex == 0 ? '#d5d5d5' : '#999999'"
							size="20"></u-icon>
					</view>
					<!-- 添加文件 -->
					<!-- <view class="btn" :style="{ '--text-color': '#42b983', '--bg-color': '#42b98316', }"><u-icon
								name="plus" color="#42b983" size="20" @click="addFileShow = true"></u-icon></view> -->
				</view>
				<view class="showImg">
					<image style="width: 16px; height: 16px;"
						src="https://img.moxikeji.net/site/160/250529/6837ebd276eb9.png" mode="scaleToFill" />
				</view>
				<view class="topScrollX">
					<scroll-view scroll-x :scroll-left="scrollLeft">
						<view class="list">
							<view class="item" v-for="(item, index) in nav">
								<view class="text" :class="currentNavId == item.id ? 'active' : ''"
									@click="changeNavIndex(index)">{{ item.name }}</view>
								<view v-if="!(index == nav.length - 1)"><u-icon name="play-right-fill" color="#999"
										size="16"></u-icon></view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<!-- 滚动视图区域 -->
			<view class="scrollY">
				<view class="list">
					<view v-if="fileData.length > 0" class="showItem">
						<scroll-view scroll-y @touchmove.stop @scrolltolower="scrolltolower"
							style="flex: 1; height: 100%;">
							<u-cell-group :border="false">
								<u-cell clickable v-for="(item, index) in fileData" :key="item.id"
									:border="index == fileData.length - 1 ? false : true" :arrow="false"
									style="padding: 0 !important;">
									<view style="display: flex; justify-content: space-between; align-items: center;"
										slot="title"
										@click="longpressControll(item.uid, item.id, item.suffix, item.password, item.name)">
										<view class="showImg" v-if="!item.suffix">
											<image style="width: 16px; height: 16px;"
												src="https://img.moxikeji.net/site/160/250529/6837ebd276eb9.png"
												mode="scaleToFill" />
										</view>
										<!-- 显示文件图标区域 -->
										<view class="showImg" v-else>
											<!-- xml -->
											<image class="imageCss"
												src="https://img.moxikeji.net/site/160/250529/6837ebd20a07e.png"
												mode="scaleToFill" v-if="item.suffix == 'xml'" />
											<!-- txt -->
											<image class="imageCss"
												src="https://img.moxikeji.net/site/160/250529/6837ebd22be76.png"
												mode="scaleToFill" v-else-if="item.suffix == 'txt'" />
											<!-- zip -->
											<image class="imageCss"
												src="https://img.moxikeji.net/site/160/250529/6837ebd25210a.png"
												mode="scaleToFill" v-else-if="item.suffix == 'zip'" />
											<!-- png -->
											<image class="imageCss"
												src="https://img.moxikeji.net/site/160/250529/6837ebd2c319f.png"
												mode="scaleToFill" v-else-if="item.suffix == 'png'" />
											<!-- html -->
											<image class="imageCss"
												src="https://img.moxikeji.net/site/160/250529/6837ebd103859.png"
												mode="scaleToFill" v-else-if="item.suffix == 'html'" />
											<!-- mp4 -->
											<image class="imageCss"
												src="https://img.moxikeji.net/site/160/250529/6837ebd129d93.png"
												mode="scaleToFill" v-else-if="item.suffix == 'mp4'" />
											<!-- pdf -->
											<image class="imageCss"
												src="https://img.moxikeji.net/site/160/250529/6837ebd14ea28.png"
												mode="scaleToFill" v-else-if="item.suffix == 'pdf'" />
											<!-- rar -->
											<image class="imageCss"
												src="https://img.moxikeji.net/site/160/250529/6837ebd171172.png"
												mode="scaleToFill" v-else-if="item.suffix == 'rar'" />
											<!-- jpg -->
											<image class="imageCss"
												src="https://img.moxikeji.net/site/160/250529/6837ebd1933f9.png"
												mode="scaleToFill" v-else-if="item.suffix == 'jpg'" />
											<!-- doc -->
											<image class="imageCss"
												src="https://img.moxikeji.net/site/160/250529/6837ebd1b87e1.png"
												mode="scaleToFill"
												v-else-if="item.suffix == 'doc' || item.suffix == 'docx'" />
											<!-- ppt -->
											<image class="imageCss"
												src="https://img.moxikeji.net/site/160/250529/6837ebd1da7b7.png"
												mode="scaleToFill"
												v-else-if="item.suffix == 'ppt' || item.suffix == 'pptx'" />
											<!-- css -->
											<image class="imageCss"
												src="https://img.moxikeji.net/site/160/250529/6837ebd085355.png"
												mode="scaleToFill" v-else-if="item.suffix == 'css'" />
											<!-- Excel -->
											<image class="imageCss"
												src="https://img.moxikeji.net/site/160/250529/6837ebd0b6035.png"
												mode="scaleToFill"
												v-else-if="item.suffix == 'xls' || item.suffix == 'xlsx'" />
											<!-- js -->
											<image class="imageCss"
												src="https://img.moxikeji.net/site/160/250529/6837ebd0d6f0c.png"
												mode="scaleToFill" v-else-if="item.suffix == 'js'" />
											<!-- 其余不知道什么类型的 -->
											<image class="imageCss"
												src="https://img.moxikeji.net/site/160/250529/6837ebd29661a.png"
												mode="scaleToFill" v-else />
										</view>
										<view class="u-line-1" style="margin: 0 auto 0 8px;">{{ item.name }}</view>

									</view>
									<view class="showImg" slot="right-icon">
										<!-- 加锁文件 -->
										<u-icon name="lock" color="#999" size="20"
											v-if="item.suffix && item.password == 1"></u-icon>
										<u-icon name="more-dot-fill" color="#999" size="20"
											v-if="item.suffix || pageUid == item.uid"
											@click="longpressControll(item.uid, item.id, item.suffix, item.password, item.name, true)"></u-icon>
									</view>
								</u-cell>
							</u-cell-group>
							<view v-if="fileData.length >= 20">
								<u-loadmore :status="status" />
							</view>
						</scroll-view>
						<view v-if="fileData.length < 20">
							<u-loadmore :status="status.toString()" />
						</view>
					</view>
					<view class="noData" v-else>
						<u-empty text="文件夹为空">
						</u-empty>
					</view>
				</view>
			</view>
		</view>
		<!-- 密码输入框模态框 -->
		<!-- #ifdef MP-BAIDU -->
		<view v-show="inputPasswordShow">
			<!-- #endif -->
			<view style="position: relative; z-index: 2;">
				<u-popup :customStyle="{ width: '250px' }" round="10" mode="center" closeable :show="inputPasswordShow"
					@close="inputPasswordShow = false" closeOnClickOverlay :safeAreaInsetBottom="false">
					<view class="password">
						<view class="title">下载此文件需要输入密码</view>
						<view>
							<u--input placeholder="请输入密码" border="surround" v-model="password" clearable
								type="password"></u--input>
						</view>
						<view class="btn" @click="downFile()"
							:style="{ 'border-color': app_color, 'color': app_color }">确认
						</view>
					</view>
				</u-popup>
			</view>
			<!-- #ifdef MP-BAIDU -->
		</view>
		<!-- #endif -->
		<!-- 添加文件模态框 -->
		<view>
			<u-modal closeOnClickOverlay :show="addFileShow" @confirm="closeShow" @close="closeShow" title="提示"
				content='添加文件/文件夹操作仅支持PC端'></u-modal>
		</view>
		<!-- #ifdef MP-BAIDU -->
		<view v-show="controllShow">
			<!-- #endif -->
			<view style="position: relative; z-index: 1;">
				<u-action-sheet :closeOnClickAction="false" :actions="list" :title="tempFileInfo.title"
					:show="controllShow" closeOnClickOverlay round="10" cancelText="取消" safeAreaInsetBottom
					@close="closeShow" @select="selectClick">
				</u-action-sheet>
			</view>
			<!-- #ifdef MP-BAIDU -->
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			nav: [{
				name: '根目录',
				id: 0
			}],
			currentNavIndex: 0, // 当前选中的导航索引
			currentNavId: 0, // 当前选中的导航id
			status: 'loadmore',
			fileData: [],
			info: {
				reid: 0,
				page: 1,
				page_num: 20
			},
			closable: true,
			pageUid: -1,
			optionsDown: [{
				name: '下载',
			}],
			optionsDel: [{
				name: '删除',
			}],
			optionsDownDel: [{
				name: '下载',
			},
			{
				name: '删除',
			}
			],
			// 输入密码弹出层
			inputPasswordShow: false,
			password: '',
			addFileShow: false,
			scrollLeft: 0,
			old: {
				scrollLeft: 0
			},
			controllShow: false, // 文件/文件夹操作显示
			list: [],
			tempFileInfo: {
				title: '',
				fileId: -1,
				password: -1
			},
		}
	},
	onLoad() {
		if (!this.userinfo || !this.userinfo.id) {
			// 清空缓存
			this.toLogin();
			return;
		}
		this.pageUid = this.userinfo.id;
		this.get();
	},
	methods: {
		selectClick(index) {
			if (index.name == '下载') {
				if (this.tempFileInfo.password == 1) {
					this.password = ''; // 清空密码输入框
					this.inputPasswordShow = true;
				} else {
					this.downFile();
				}
			} else if (index.name == '删除') {
				this.del(this.tempFileInfo.fileId);
			}
		},
		// 文件夹点击事件则是进入，文件则是操作面板
		longpressControll(uid, fileId, suffix, password, name, mode = false) {
			console.log('longpressControll', uid, fileId, suffix, password, name, mode);
			// 重置表单 
			this.tempFileInfo = {
				title: '',
				fileId: -1,
				password: -1,
			};
			// mode false 则是点击cell事件， true则是点击更多操作事件
			if (!mode && !suffix) {
				this.goFolder(suffix, fileId, name);
				return;
			}
			if (suffix) {
				// 文件 则 可以下载 或删除
				if (this.pageUid == uid) {
					this.list = this.optionsDownDel;
				} else {
					this.list = this.optionsDown;
				}
			} else {
				if (this.pageUid == uid) {
					this.list = this.optionsDel;
				} else return;
			};
			this.tempFileInfo = {
				title: name,
				fileId: fileId,
				password: password,
			}
			this.controllShow = true;
		},
		closeShow() {
			this.inputPasswordShow = false;
			this.addFileShow = false;
			this.controllShow = false;
		},
		goFolder(suffix, reid, name) {
			if (!suffix) {
				// 进入文件夹
				this.currentNavIndex = this.nav.length;
				this.nav.push({
					name: name,
					id: reid
				});
				// 滑动到最右侧
				this.goRight();
				this.currentNavId = reid;
				this.fileData = [];
				this.get(1, reid);
			}
		},
		// 拼接下载地址url
		downFileUrl(file) {
			// 去除this.moxiConfig().domain 最后的/
			let domain = this.moxiConfig().domain;
			if (domain.indexOf('/') == domain.length - 1) {
				domain = domain.substring(0, domain.length - 1);
			}
			return this.moxiConfig().domain + file;
		},
		// 下载文件
		downFile() {
			if (this.tempFileInfo.fileId == -1) return this.msg('文件不存在,-1');
			this.moxiPost("/plugin/oa/user/doc/get_file", {
				id: this.tempFileInfo.fileId,
				password: this.password
			}, (data) => {
				let downUrl = this.downFileUrl(data.data.file);
				let fileName = data.data.name || 'file';
				// 只有h5存在
				// #ifdef WEB
				const link = document.createElement('a');
				link.download = fileName;
				link.href = downUrl;
				document.body.appendChild(link);
				link.click();
				document.body.removeChild(link);
				this.closeShow();
				// #endif

				// #ifndef WEB
				let self = this;
				console.log('触发下载');
				uni.downloadFile({
					url: downUrl,
					success: function (res) {
						uni.saveFile({
							tempFilePath: res.tempFilePath,
							success: function (saveRes) {
								self.msg(`下载成功,保存路径为：${saveRes.savedFilePath}`);
								self.closeShow();
							}
						});
					}
				});
				// #endif
			})
		},
		// 删除文件
		del(id) {
			this.isBox('确认删除吗?', () => {
				this.moxiPost("/plugin/oa/user/doc/del", {
					id: id
				}, (data) => {
					this.get();
					this.msg(data.hint);
					this.closeShow();
				})
			}, '仅删除记录，如需删除文件请到后台附件管理中删除！')
		},
		scrolltolower() {
			if (this.status == 'loadmore') {
				this.get(this.info.page + 1, this.currentNavId, true);
			}
		},
		// 面包屑导航点击事件
		changeNavIndex(index) {
			if (index < 0) return;
			this.currentNavIndex = index;
			let id = this.nav[index].id;
			if (this.currentNavId == id) return;
			// 关闭所有滑块单元格样式
			this.currentNavId = id;
			// 如果是父节点目录，则清除后面所有子目录节点
			let faterIndex = this.nav.findIndex(item => item.id == id);
			if (faterIndex != -1) {
				this.nav.splice(faterIndex + 1, this.nav.length - faterIndex - 1);
				// 加载当前目录下的文件列表
				this.get(1, id);
			}
		},
		getdisabled(id, file) {
			if (this.pageUid != id && !file) return true;
			else return false;
		},
		getOptions(id, file) {
			if (this.pageUid == id) {
				if (file) {
					return this.optionsDownDel;
				} else {
					return this.optionsDel;
				}
			} else return this.optionsDown;
		},
		// 获取文件列表
		get(page, reid, scroll = false) {
			if (page) {
				this.info.page = page;
			}
			if (reid !== undefined) {
				this.info.reid = reid;
			}
			this.moxiPost("/plugin/oa/user/doc/get", this.info, (data) => {
				this.status = 'loadmore';
				let tempData = [];
				tempData = data.data.data;
				if (scroll) {
					this.fileData = this.fileData.concat(tempData);
				} else {
					this.$set(this, 'fileData', tempData);
				}
				if (tempData.length == 0 || tempData.length < this.info.page_num) {
					this.status = 'nomore';
				}
			})
		},
		scroll(e) {
			this.scrollLeft = e.detail.scrollLeft;
		},
		// 滚动到最右边
		goRight() {
			// 解决view层不同步的问题
			this.scrollLeft = this.old.scrollLeft
			this.$nextTick(function () {
				this.scrollLeft = 99999;
			});
		},
	}
}
</script>

<style lang="scss" scoped>
@mixin flex($gap: 8px, $ju: space-between, $al: center, $fd: row, $wrap: nowrap) {
	display: flex;
	justify-content: $ju;
	align-items: $al;
	gap: $gap;
	flex-wrap: $wrap;
	flex-direction: $fd;
}

.file_manage {
	display: flex;
	flex-direction: column;
	gap: 12px;
	overflow: hidden;
	flex: 1;
	padding: 0 16px;
	margin-top: 12px;

	.topNav {
		height: 30px;
		@include flex(8px, normal);
		font-size: 14px;
		color: #333;
		white-space: nowrap;

		.topScrollX {
			overflow: scroll hidden;

			.list {
				@include flex(8px, normal);

				.item {
					@include flex;

					.active {
						color: var(--text-color);
					}

					.text {
						cursor: pointer;
					}
				}
			}
		}

		.controll {
			@include flex(8px);

			.btn {
				@include flex(8px, center, center);
				border: 1px solid var(--text-color);
				border-radius: 4px;
				padding: 4px;
				font-size: 14px;
				color: var(--text-color);
				background-color: var(--bg-color);
			}
		}
	}

	.scrollY {
		display: flex;
		overflow: hidden;
		border-radius: 8px;

		.list {
			@include flex(8px, space-between, normal, column);
			background-color: #fff;
			border-radius: 8px;
			padding: 12px;
			min-height: 50vh;
			flex: 1;
			margin-bottom: 12px;
		}

		.showItem {
			flex: 1;
			overflow-x: hidden;
			overflow-y: scroll;
			display: flex;
			flex-direction: column;

			.u-cell {
				::v-deep &__body {
					padding: 0;
					line-height: 40px;
				}
			}
		}

		.noData {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 50vh;
			background-color: #fff;
			border-radius: 8px;
			flex: 1;
		}
	}
}

.showImg {
	display: inline-flex;
	align-items: center;
	gap: 4px;

	.imageCss {
		width: 16px;
		height: 16px;
	}
}

.password {
	margin-top: 36px;
	padding: 0 16px 16px;
	font-size: 14px;

	&>view {
		margin-bottom: 8px;

		&:last-of-type {
			margin-bottom: 0;
		}
	}

	.title {
		color: #000;
		font-weight: bold;
		text-align: center;
	}

	.btn {
		padding: 4px 0;
		text-align: center;
		border-radius: 4px;
		border: 1px solid #000;
	}
}
</style>